import { useState } from 'react'

function Tabs({ children }: any) {
  // console.log(children[0].props.label, '================');

  const [activeTab, setActiveTab] = useState(children[0].props.label);
  const handleClick = (label: any) => {
    setActiveTab(label)
  }
  return (
    <div style={{ width: '100%' }}>
      <ul className='tab_list'>
        {
          children.map((tab: any, index: any) => (
            <li key={index}
              className={tab.props.label === activeTab ? 'active' : ''}
              onClick={() => handleClick(tab.props.label)}
            >
            
              {tab.props.label}
            </li>
          ))
        }
      </ul>
      <div className='tab_content'>
        {children.map((tab:any)=>{
          if(tab.props.label!==activeTab) return undefined;
          return tab.props.children;
        })}

      </div>
    </div>
  )
}

export default Tabs
